<template>
  <div class="perInfo">
    <Nav></Nav>
    <Content>
      <h2 class="text-left">基本设置</h2>
      <Row>
        <Col :span="6" class="text-left">
          <Form :model="userInfo" label-position="top">
            <FormItem label="邮箱">
              <Input placeholder="请输入邮箱" v-model="userInfo.email"></Input>
            </FormItem>
            <FormItem label="昵称">
              <Input
                placeholder="请输入昵称"
                v-model="userInfo.username"
              ></Input>
            </FormItem>
            <el-radio-group v-model="userInfo.gender">
              <el-radio :label="0">女</el-radio>
              <el-radio :label="1">男</el-radio>
            </el-radio-group>
            <FormItem label="个人简介">
              <Input
                placeholder="请输入个人简介"
                type="textarea"
                v-model="userInfo.perMessage"
              ></Input>
            </FormItem>
            <FormItem label="国家/地区">
              <Select v-model="model1" style="width: 200px">
                <Option
                  v-for="item in nation"
                  :value="item.value"
                  :key="item.value"
                  >{{ item.label }}</Option
                >
              </Select>
            </FormItem>
            <FormItem label="所在省市">
              <Select v-model="model1" style="width: 200px">
                <Option
                  v-for="item in nation"
                  :value="item.value"
                  :key="item.value"
                  >{{ item.label }}</Option
                >
              </Select>
              <Select v-model="model1" style="width: 200px">
                <Option
                  v-for="item in nation"
                  :value="item.value"
                  :key="item.value"
                  >{{ item.label }}</Option
                >
              </Select>
            </FormItem>
            <FormItem label="街道地址">
              <Input
                placeholder="请输入街道地址"
                v-model="userInfo.perMessage"
              ></Input>
            </FormItem>
            <FormItem label="联系电话">
              <Input
                placeholder="请输入电话"
                v-model="userInfo.perMessage"
              ></Input>
            </FormItem>
            <Button type="primary" @click="changeUserInfo">提交修改</Button>
          </Form></Col
        >
        <Col :span="4" offset="1">
          <Avatar></Avatar>
        </Col>
      </Row>
    </Content>
  </div>
</template>

<script>
import Avatar from "../components/Avatar.vue";
export default {
  name: "PerInfo",
  data() {
    return {
      nation: [
        { value: "0", label: "中国" },
        {
          value: "New York",
          label: "New York",
        },
        {
          value: "London",
          label: "London",
        },
        {
          value: "Sydney",
          label: "Sydney",
        },
        {
          value: "Ottawa",
          label: "Ottawa",
        },
        {
          value: "Paris",
          label: "Paris",
        },
        {
          value: "Canberra",
          label: "Canberra",
        },
      ],
      model1: "0",
      userInfo: {
        email: "",
        username: "",
        perMessage: "",
        gender: "",
        avatarUrl: "",
      },
    };
  },
  components: {
    Avatar,
  },
  methods: {
    changeUserInfo() {
      this.userInfo.avatarUrl = this.$store.state.user.userInfo.avatar;
      this.$userApi
        .changeUserInfo({
          data: this.userInfo,
        })
        .then((res) => {
          if (res.ret === 200) {
            this.$store.state.user.userInfo.username = this.userInfo.username;
            this.$message.success("提交成功");
            this.$router.push("/");
          }else{
            console.log(res);
            this.$Message.error(res.msg.username || "提交失败")
          }
        });
    },
  },
};
</script>

<style>
</style>